Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <body class="bg-gradient-to-b from-10% via-50% to-90% from-amber-300 via-amber-900 to-amber-300 flex justify-center items-center min-h-screen p-4">

<div class="bg-zinc-300  shadow-lg  w-full max-w-4xl border  grid gap-px ring-4 ring-black/5 rounded
            [grid-template-columns:repeat(auto-fill,minmax(12rem,1fr))] 
            *:p-10
            *:bg-white
            *:flex
            *:flex-col 
            *:items-center 
            *:justify-center
            *:gap-2
            *:text-center
            *:transition-all
            *:duration-300
            
            first:*:text-left
            [&_p]:whitespace-nowrap
            [&_h2]:whitespace-nowrap
            [&_h2]:font-medium
            [&_h2]:tracking-wider
            [&_h2]:text-lg

[&_button]:border-none
            [&_button]:outline-none
            [&_button]:ring-0
            [&_button]:py-2
            [&_button]:px-4
            [&_button]:bg-black
            [&_button]:text-white
            [&_button]:rounded-md
            [&_button]:w-fit
            [&_button]:mx-auto
            [&_button]:transition-all
            [&_button]:duration-300

[&_.prices]:p-2 
            [&_.prices]:grid
            [&_.prices]:[grid-template-areas:'stack']
            [&_.prices>p]:[grid-area:stack]
            [&_.prices>p]:transition-all
            [&_.prices>p]:duration-500
            [&_.prices>p]:ease-in-out
            [&_.prices]:overflow-hidden
            [&_.prices_span]:text-sm

first:[&_.prices>p]:-translate-y-12
            first:[&_.prices>p]:text-amber-500
            last:[&_.prices>p]:translate-y-12
            last:[&_.prices>p]:text-sky-600

peer-checked/billing-1:after:[&_#label-billing-1]:scale-100
            peer-checked/billing-1:after:[&_#label-billing-1]:bg-amber-500
            peer-checked/billing-1:[&_#label-billing-1]:text-amber-500
            peer-checked/billing-1:hover:*:bg-amber-100
            peer-checked/billing-1:hover:[&_button]:bg-amber-600
            peer-checked/billing-1:hover:[&_a]:text-amber-600

peer-checked/billing-1:first:[&_.prices>p]:translate-y-0
            peer-checked/billing-2:after:[&_#label-billing-2]:scale-100
            peer-checked/billing-2:last:[&_.prices>p]:translate-y-0
            peer-checked/billing-2:hover:*:bg-sky-100
            peer-checked/billing-2:hover:[&_button]:bg-sky-600
           peer-checked/billing-2:hover:[&_a]:text-sky-600
        ">
    <div class="space-y-4
                [&_input]:sr-only
                *:cursor-pointer
                *:flex
                *:gap-3
                *:items-center
                *:relative
                *:pl-10
                *:isolate
                hover:first:*:text-amber-600
                hover:last:*:text-sky-600
                first:[&_label:has(input:checked)]:text-amber-600
                last:[&_label:has(input:checked)]:text-sky-600
                before:*:absolute
                before:*:top-2/4
                before:*:-translate-y-2/4
                before:*:left-0
                before:*:rounded-full
                before:*:size-6
                before:*:border
                before:*:border-slate-500/50
                before:*:-z-10
                hover:before:*:border-sky-500/50
                after:*:absolute
                after:*:top-2/4
                after:*:-translate-y-2/4
                after:*:left-0
                after:*:rounded-full
                after:*:size-6
                after:*:scale-0
                after:*:bg-sky-500
                after:*:transiton-all
                after:*:duration-150
                after:*:-z-10
                [&_p]:text-sm
                
            ">
      <label id="label-billing-1" for="billing-1">
        <p>Billed monthly</p>
      </label>
      <label id="label-billing-2" for="billing-2">
        <p>Billed anually</p>
      </label>
    </div>

<div class="hover:scale-105">
      <h2>For individualas</h2>
      <div class="prices">
        <p>$13.99 / <span>month</span></p>
        <p>$9.99 / <span>month</span></p>
      </div>
      <button type="button">Buy now</button>
      <p> </p>
    </div>

<div class="hover:scale-105">
      <h2>For families</h2>
      <div class="prices">
        <p>$19.99 / <span>month</span></p>
        <p>$16.99 / <span>month</span></p>
      </div>
      <button type="button">Buy now</button>
      <p> </p>
    </div>

<div class="hover:scale-105">
      <h2>For teams</h2>
      <div class="prices">
        <p>$24.99 / <span>month</span></p>
        <p>$19.99 / <span>month</span></p>
      </div>
      <button type="button">Try for free</button>
      <p class="text-xs">or <a href="javascript:void()" class="underline ">purchase now</a></p>
    </div>

</div>

</div>
</body>
</body>
</html>

Frontend Forever App